<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <meta name="keywords" content="web前端个人简历,web前端,前端工程师">
  <meta name="description" content="TQ.web前端个人简历">
  <title>求职中——web前端工程师简历</title>
  <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./css/iconfont.css">
  <style>
    .content {
      width: 100vw;
      height: 100vh;
      background: url('./images/glow-bg.jpg') no-repeat;
      background-position: center bottom;
      background-size: 100% 100%;
      overflow: hidden;

    }

    .content:after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.4);
    }

    .beetle {
      width: 7px;
      height: 4px;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.4);
      animation: flicker 4000ms ease infinite;
      position: relative;
      z-index: 88;
      top: 50%;
      left: 50%;
    }

    .beetle1 {
      top: 60%;
      left: 20%;
    }

    .beetle2 {
      top: 40%;
      left: 60%;
    }

    .beetle3 {
      top: 38%;
      left: 30%;
    }

    .beetle4 {
      top: 40%;
      left: 80%;
    }

    @keyframes flicker {

      0%,
      100% {
        background: #fefa01;
        box-shadow: 0 0 8px #fefa01, inset 0 0 0 0 rgba(14, 10, 10, 0.1);
      }

      30%,
      70% {
        background: #fffd99;
        box-shadow: 0 0 16px 8px #fefa01, inset 0 0 0 0 rgba(14, 10, 10, 0.1);
      }

      50% {
        box-shadow: 0 0 16px 8px rgba(254, 250, 1, 0.8), inset 0 0 0 0 rgba(14, 10, 10, 0.1);
      }
    }

    @keyframes fade {
      0% {
        opacity: 0;
      }

      50% {
        opacity: 1;
      }

      100% {
        opacity: 0;
      }
    }

    @keyframes up {
      0% {
        transform: translate(0px, 10vh);
      }

      100% {
        transform: translate(0px, -90vh);
      }
    }

    @keyframes clockwiseSpin {
      0% {
        transform: translate(0, 10vh) rotate(-50deg);
      }

      30% {
        transform: translate(100px, -10vh) rotate(0deg);
      }

      100% {
        transform: translate(0, -90vh) rotate(50deg);
      }
    }

    @keyframes counterclockwiseSpin {
      0% {
        transform: translate(0, 10vh) rotate(50deg);
      }

      30% {
        transform: translate(-100px, -10vh) rotate(0deg);
      }

      100% {
        transform: translate(50px, -90vh) rotate(-50deg);
      }
    }
  </style>
</head>

<body>

  <div class="content" id="leafContainer">
    <div class="beetle"></div>
    <div class="beetle beetle1"></div>
    <div class="beetle beetle2"></div>
    <div class="beetle beetle3"></div>
    <div class="beetle beetle4"></div>
    <audio src="./music/music.mp3" loop="loop"  autoplay="autoplay" preload="auto" style="display: none;"></audio>
  </div>
  
  <script>


    const NUMBER_OF_LEAVES = 40;
    function init() {
      let container = document.getElementById('leafContainer');
      for (let i = 0; i < NUMBER_OF_LEAVES; i++) {
        container.appendChild(createALeaf());
      }
    }

    //返回设置的随机整数
    function randomInteger(low, high) {
      return low + Math.floor(Math.random() * (high - low));
    }
    //返回设置的随机浮点数
    function randomFloat(low, high) {
      return low + Math.random() * (high - low);
    }

    function pixelValue(value) {
      return value + 'px';
    }

    function durationValue(value) {
      return value + 's';
    }
    function createALeaf() {
      // 创建萤火虫元素
      var leafDiv = document.createElement('div');
      leafDiv.className = 'beetle'
      // 萤火虫初始位置
      leafDiv.style.bottom = "100px";

      //萤火虫距页面左侧的距离
      leafDiv.style.left = pixelValue(randomInteger(0, 1500));

      // 随机得到正时针旋转并向右移动的动画、逆时针旋转并向左移动的动画；
      var spinAnimationName = (Math.random() < 0.5) ? 'clockwiseSpin' : 'counterclockwiseSpin';
      // 给生成的萤火虫元素添加动画
      leafDiv.style.animationName = 'flicker,fade, up,' + spinAnimationName;
      // 随机设置动画时间
      var fadeAndDropDuration = durationValue(randomFloat(5, 11));
      var leafDelay = durationValue(randomFloat(0, 5));
      leafDiv.style.animationDelay = leafDelay;
      leafDiv.style.animationDuration = fadeAndDropDuration;

      return leafDiv;
    }

    window.addEventListener('load', init);
  </script>
</body>

</html>